<template>
  <div class="app-container home">
    <el-row :gutter="20">
<!--      <el-col :xs="24" :sm="24" :md="12" :lg="24"  v-show="user.show">
        <el-card class="update-log" >
          <div slot="header" class="clearfix">
            <span>自己流量统计</span>
          </div>
          <div>
              <div class="div">
                <span>充值:{{mFormatFlow(user.chargeFlow)}}</span>
                <span>消耗:{{mFormatFlow(user.consumedFlow)}}</span>
                <span>剩余:{{mFormatFlow(user.residueFlow)}}</span>
              </div>
          </div>
        </el-card>
      </el-col>-->

      <el-col :xs="24" :sm="24" :md="12" :lg="24"  v-show="summary.show">
        <el-card class="update-log" >
          <div slot="header" class="clearfix">
            <span>总统计</span>
          </div>
          <div>
            <div class="div">
              <span>总消耗</span>
              <span>今天消耗</span>
<!--              <span>预估今天消耗</span>-->
              <span>昨天消耗</span>
            </div>
            <div class="div">
              <span>{{mFormatFlow(summary.all)}}</span>
              <span>{{mFormatFlow(summary.today)}}</span>
<!--              <span>{{mFormatFlow(summary.computeToday)}}</span>-->
              <span>{{mFormatFlow(summary.yesterday)}}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="12" :lg="24"  >
        <el-card class="update-log" >
          <div slot="header" class="clearfix">
            <span>用户统计</span>
          </div>
          <div>
            <div class="div2">
              <span>用户名</span>
              <span>代理名</span>
              <span>充值</span>
              <span>总消耗</span>
              <span>今天消耗</span>
<!--              <span>预估今天消耗</span>-->
              <span>昨天消耗</span>
              <span>剩余流量</span>
            </div>
            <div class="div2" v-for="data in userList">
              <span>{{data.username}}</span>
              <span>{{data.account}}</span>
              <span>{{mFormatFlow(data.chargeFlow)}}</span>
              <span>{{mFormatFlow(data.accountConsumedFlow) }}</span>
              <span>{{mFormatFlow(data.todayConsumedFlow)}}</span>
<!--              <span>{{mFormatFlow(data.computeTodayFlow)}}</span>-->
              <span>{{mFormatFlow(data.yesterdayConsumedFlow)}}</span>
              <span>{{mFormatFlow(data.residueFlow)}}</span>
            </div>

          </div>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import {
  flowCount
} from "@/api/proxy/account";
import {mFormatFlow, mFormatFlowOld} from "@/utils/ruoyi";

export default {
  name: "Index",
  data() {
    return {
      userList:{},
      summary:{
        show : false
      }
    };
  },
  created() {
    this.getFlowCount();
  },
  methods: {
    mFormatFlowOld,
     getFlowCount(){
       flowCount().then(response => {
         this.userList = response.data.userList;
         this.summary = response.data.summary;
       });
     },
  }
};
</script>

<style scoped lang="scss">
.home {
  .clearfix{
    font-size: 20px;
  }
  .div{
    font-size: 20px;
    margin-top: 10px;
    text-align: center;
    width: 100%;
    /*border: 1px solid red;*/
    height: 50px;
    line-height: 50px;
    span{
      width: 33%;
      display: inline-block;
    }
  }

  .div2{
    font-size: 20px;
    margin-top: 10px;
    text-align: center;
    width: 100%;
    /*border: 1px solid red;*/
    height: 50px;
    line-height: 50px;
    span{
      width: 14%;
      display: inline-block;
    }
  }
}
</style>

